<template>
	<view class="box">
		<!-- <uNavbar title="" :bgColor="backgroundColor" leftIconColor="#ffffff"></uNavbar> -->
		<view class="back flex_c">
			<image src="../../static/icon/left_jt.png" mode="aspectFill" @click="goBack"></image>
		</view>
		<view  style="width: 100%;height: 88rpx;"></view>
		<view class="abox">
			<view class="sss">
				<image src="/static/image/sz.png" mode=""></image>
				<text>华小福专属权益</text>
			</view>

			<image class="img1" @click="gokxjl" src="../../static/image/kxjl.png" mode=""></image>
			<image class="img2"  src="/static/image/wfjs.png" mode="" @click="gowfjs"></image>
			<image class="img4"  src="/static/image/qjc.png" mode="" @click="guessingCard"></image>
			<image class="img3" @click="goglgs" src="../../static/image/glgs.png" mode=""></image>
			<view class="btnwrap">
				<view class="top">
					<text class="textone">还剩 </text><text class="texttwo">
						{{(blind_box_price-surplus_price).toFixed(2)}} </text> <text class="text3" @click="gostore">
						点击去商城购物为宝箱充能</text>
				</view>
				<view class="pros">
					<u-line-progress height="20" :percentage="gropss" inactiveColor="#FFE5CC" :showText="false"
						activeColor="#F87156"></u-line-progress>
					<text>{{surplus_price}}/{{blind_box_price}}</text>
				</view>
				<view class="btns" @click="open">
					<image src="../../static/image/btnk.png" mode=""></image>
					<text>宝箱数量：{{surplus_blind_number}}</text>
				</view>
			</view>
			<u-popup :show="gifShow" mode="center" bgColor="transparent">
				<view class="gifImg_box flex_c" v-if="gifShow">
					<image class="gifImg" :src="box_images" mode="aspectFill"></image>
				</view>
			</u-popup>
			<u-popup :show="tipShow2" mode="center" @close="tipShow2 = false" closeable bgColor="transparent">
				<view class="prompt flex_ZC">
					<!-- <image src="../../static/image/sssbox.png" mode="aspectFill"></image> -->
					<text class="tishi" style="margin-top: 30rpx;color: #000;">提示</text>
					<text style="margin-top: 30rpx;" class="c3">{{content}}</text>
					
					<view class="prompt_ntm c6" @click="gohxf">
						<text>去购买</text>
					</view>
					<view class="empty"></view>
				</view>
			</u-popup>
			<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
				<view class="prompt flex_ZC">
					<image src="../../static/image/sssbox1.png" mode="aspectFill"></image>
					<text class="tishi">恭喜你获得奖励</text>
					<view class="items">
						<image :src="image" mode=""></image>
						<view  class="text" >{{name}}*{{num1}}</view>
					</view>
					<view class="items">
						<image :src="g_image" mode=""></image>
						<view class="text" >{{g_name}}*1</view>
					</view>
					<view class="prompt_ntm" @click="tipShow = false">
						<text>我知道了</text>
					</view>
					<view class="empty"></view>
				</view>
			</u-popup>
			<view class="main">
				<view class="subject">
					<image src="../../static/image/zjdt.png" mode=""></image>
					<view class="ttip">
						开奖平均市值{{averrage_price}}福合元宝
					</view>
				</view>
				<view class="body">
					<maoScroll :data="data" :showNum="showNum" :lineHeight="lineHeight"
						:animationScroll="animationScroll" :animation="animation">
						<template v-slot="{line}">
							<view class="line">
								<image :src="line.head_img" mode="aspectFill"></image> {{line.nickname.substring(0, 2)}}** 获得
								{{line.goods_name}}*{{line.goods_number}}
							</view>
						</template>
					</maoScroll>
				</view>
				<!-- <noDatas  v-if="data.length==0"  :xxxList="data" :status="status"></noDatas> -->
			</view>
		</view>

	</view>
</template>

<script>
	import maoScroll from "@/components/mao-scroll/mao-scroll.vue"
	import {
		blindboxSummary,
		winningrecord,
		openBlindbox,
		config
	} from "../../api/shopp.js"
	export default {
		components: {
			maoScroll
		},
		data() {
			return {
				title: 'Hello',
				data: [],
				count: 6,
				showNum: 5,
				lineHeight: 60,
				animationScroll: 800,
				animation: 1000,
				backgroundColor: "transparent", //标题背景颜色
				box_number: 0,
				blind_box_price: "",
				averrage_price: "",
				gropss: "",
				surplus_price: "",
				surplus_blind_number: "",
				gifShow: false,
				box_images: "",
				tipShow: false,
				tipShow2: false,
				g_image:"",
				g_name:"",
				image:"",
				name:"",
				num1:"",
				num2:"",
				content:'',
				hxfid:"",
					status: 'nomore', //加载前值为loadmore，加载中为loading，没有数据为nomore
			}
		},
		onShow() {
			this.tipShow=false
			this.tipShow2=false
		},
		onLoad() {
			console.log('init');
			console.log(this.data, '初始化数据 空数据');
			let self = this;
			self.getinfo()
			self.getimage()
			
			setTimeout(function() {
				console.log('模拟从网上获取数据 花费了1秒');
				self.getwinningrecord()
				console.log(self.data, '获取到的数据');
			}, 1000);
		},
		methods: {
			gowfjs(){
				uni.navigateTo({
					url:"/pagesMy/treasurebox/treasureboxrule"
				})
			},
			guessingCard(){
				uni.navigateTo({
					url:'/pagesMy/activityCenter/activityZone'
				})
			},
			getimage() {
				config().then(res => {
					this.box_images = res.data.box_images
					this.averrage_price=res.data.averrage_price
					console.log(res)
				})
			},
			gostore() {
				uni.switchTab({
					url: "/pages/index/shoppingMall"
				})
			},
			open() {
				// uni.$u.toast("敬请期待")
				let that = this;
				if (this.surplus_blind_number == 0) {
					uni.$u.toast("没有宝箱了")
				} else {
					uni.showLoading({
						title: "加载中",
						mask: true
					})
					// this.gifShow = true
					openBlindbox().then(res => {
						if (res.code == 1) {
							this.gifShow = true
							this.g_image=res.data.guessing_image
							this.g_name=res.data.guessing_name
							this.image=res.data.image
							this.name=res.data.name
							this.num1=res.data.number
							this.getinfo()
							setTimeout(() => {
								that.gifShow = false
								that.tipShow = true
							}, 1200);
						}
						if(res.code==1009){
							this.tipShow2=true
							this.content=res.msg
							this.hxfid=res.data.hxf_goods_id
						}

					})
					uni.hideLoading()
				}

			},
			gohxf(){
				uni.navigateTo({
					url:"/pagesMy/mallCenter/productDetails?id="+this.hxfid
				})
			},
			goglgs() {
				// uni.$u.toast("敬请期待")
				uni.navigateTo({
					url: "/pagesMy/treasurebox/probability"
				})
			},
			getwinningrecord() {
				winningrecord().then(res => {
					this.data = res.data
					this.showNum = res.data.length
					console.log(res)
				})
			},
			gokxjl() {
				// uni.$u.toast("敬请期待")
				uni.navigateTo({
					url: "/pagesMy/treasurebox/record"
				})
			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			getinfo() {
				blindboxSummary().then(res => {
					this.box_number = res.data.blind_box_number
					this.blind_box_price = res.data.blind_box_price
					// this.averrage_price = res.data.averrage_price
					this.surplus_price = res.data.surplus_price
					this.surplus_blind_number = res.data.surplus_blind_number
					let ac = 100 / Number(this.blind_box_price)
					let bd = (Number(this.surplus_price)) * ac
					this.gropss = bd
					console.log(this.gropss, "11")
					console.log(res)
				})
			},
			// onPageScroll: function(e) {
			// 	const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 	// 根据滚动位置修改状态栏样式
			// 	if (scrollTop > 100) {
			// 		this.backgroundColor = '#E0DDDA';
			// 		this.titles = '详情';
			// 	} else {
			// 		this.backgroundColor = 'transparent';
			// 		this.titles = '';
			// 	}
			// 	// console.log("滚动距离为：" + e.scrollTop);
			// },
			createData() {
				let d = [{
						author1: 'MaoUI1',
						subject: 'OnePlus手机 *  1部'
					},
					{
						author1: 'MaoUI2',
						subject: 'OnePlus手机 *  2部'
					},
					{
						author1: 'MaoUI3',
						subject: 'OnePlus手机 *  3部'
					},
					{
						author1: 'MaoUI4',
						subject: 'OnePlus手机 *  4部'
					},
					{
						author1: 'MaoUI5',
						subject: 'OnePlus手机 *  5部'
					},
					{
						author: 'MaoUI6',
						subject: 'OnePlus手机 *  6部'
					},
				]
				this.data = d
				// for(let i = 1; i <= this.count; i++){
				// 	this.data.push({
				// 		author: 'MaoUI',
				// 		subject: 'OnePlus手机 * ' + i + '部'
				// 	})
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}
	.back {
		position: fixed;
		top: 30rpx;
		/* #ifdef APP */
		top: 60rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>text {
		font-size: 28rpx;
		/* #ifdef APP */
		font-size: 36rpx;
		/* #endif */
		color: #ffffff;
	}

	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}
	.box {
		width: 100%;
		height: 2202rpx;
		background-image: url("../../static/image/boxbg.png");
		background-size: 100% 100%;
		position: relative;
	}

	.items {
		width: 560rpx;
		margin: 0 auto;
		display: flex;
		// justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		>image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-left: 120rpx;
		}

		.text {
			max-width: 300rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			margin-left: 20rpx;
			// white-space: nowrap;
			// /* 文本不换行 */
			// overflow: hidden;
			// /* 隐藏超出部分 */
			// text-overflow: ellipsis;
			/* 显示省略号 */
		}
	}

	.abox {
		width: 100%;
		height: 2102rpx;
		position: relative;

		.sss {
			// width: 700rpx;
			// height: 66rpx;
			width: 700rpx;
			height: 80rpx;
			position: absolute;
			top: 218rpx;
			left: 50%;
			transform: translate(-50%);
			
			>image {
				width: 358rpx;
				height: 66rpx;
				top: 50%;
				left: 50%;
				transform: translate(-50%);
				position: absolute;
			}

			>text {
				width: 700rpx;
				text-align: center;
				top: 75%;
				left: 50%;
				transform: translate(-50%);
				position: absolute;
				font-size: 30rpx;
				color: #FFFFFF;
				font-family: iconfont;
			}
		}
	}

	.prompt {
		position: relative;
		width: 600rpx;
		// background: #2A2753;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
		 // background: #FECAA8; 
		background: linear-gradient(180deg, #FECAA8, #fff);
	}

	.prompt>image {
		position: absolute;
		top: -170rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 330rpx;
		height: 330rpx;
		z-index: 8;
	}

	.argb {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 150rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: linear-gradient(0deg, #FBAF86, #FFDDA2);
		z-index: 3;
	}

	.tishi {
		font-family: iconfont;
		font-weight: 700;
		font-size: 48rpx;
		color: #FF8D35;
		margin-top: 120rpx;
	}

	.prompt_tit {
		font-size: 52rpx;
		color: #FF5638;
		margin-top: 68rpx;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #F66E6E;
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}

	.img1 {
		width: 138rpx;
		height: 56rpx;
		position: absolute;
		left: 0rpx;
		top: 414rpx;
	}

	.img2 {
		width: 138rpx;
		height: 56rpx;
		position: absolute;
		left: 0rpx;
		top: 484rpx;
	}
	.img4{
		width: 138rpx;
		height: 56rpx;
		position: absolute;
		left: 0rpx;
		top: 554rpx;
	}

	.img3 {
		width: 50rpx;
		height: 152rpx;
		position: absolute;
		top: 372rpx;
		right: 0rpx;
	}

	.main {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%);
		width: 702rpx;
		height: 824rpx;
		background: #FEF2E4;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.subject {
		width: 702rpx;
		height: 168rpx;
		position: relative;

		.ttip {
			width: 702rpx;
			text-align: center;
			position: absolute;
			top: 104rpx;
			left: 50%;
			transform: translate(-50%);
			color: #D29A68;
			font-size: 30rpx;
		}

		>image {
			position: absolute;
			width: 338rpx;
			height: 66rpx;
			top: 0;
			left: 50%;
			transform: translate(-50%);
		}
	}

	.body {

		width: 702rpx;
		height: 600rpx !important;
	}

	.line {
		margin: 0 auto;
		width: 100%;
		margin-left: 20rpx;
		>image {
			width: 38rpx;
			height: 38rpx;
			border-radius: 50%;
			padding-top: 4rpx;
			margin-right: 4rpx;
		}
		white-space: nowrap;        /* 禁止文本换行 */
		overflow: hidden;           /* 隐藏超出的文本 */
		text-overflow: ellipsis;  
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #D29A68;
	}

	.btnwrap {
		width: 702rpx;
		height: 428rpx;
		background-image: url("../../static/image/mainxx.png");
		background-size: 100% 100%;
		position: absolute;
		top: 788rpx;
		left: 50%;
		transform: translate(-50%);

		.top {
			width: 702rpx;
			position: absolute;
			text-align: center;
			top: 42rpx;
			left: 50%;
			transform: translate(-50%);

			.textone {
				color: #D8A779;
			}

			.texttwo {
				font-size: 36rpx;
				color: #F23534;
				font-family: iconfont;
			}

			.text3 {
				font-weight: 500;
				font-size: 28rpx;
				color: #BE7432;
				text-decoration-line: underline;
			}
		}

		.pros {
			width: 600rpx;
			height: 66rpx;
			background: #FFE5CC;
			border-radius: 206rpx 206rpx 206rpx 206rpx;
			position: absolute;
			top: 108rpx;
			left: 50%;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: translate(-50%);

			>text {
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}

		.btns {
			width: 720rpx;
			height: 272rpx;
			position: absolute;
			bottom: -50rpx;
			left: 50%;
			transform: translate(-50%);

			>image {
				width: 720rpx;
				height: 272rpx;
			}

			>text {
				position: absolute;
				bottom: 120rpx;
				left: 50%;
				transform: translate(-50%);
				z-index: 6;
				font-weight: 700;
				font-size: 30rpx;
				color: rgba(255, 255, 255, 0.9);
				font-family: iconfont;
			}
		}
	}
</style>